<template>
  <el-button @click="goBack" class="goback">返回</el-button>
    <el-card  class="main">
        <template #header>
        <div class="card-header">
            <span class="title">{{ videoInfo.title }}</span>
        </div>
        </template>
        <!-- <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p> -->
        <video controls :src="videoInfo.videoUrl" @play="onPlay" @pause="onPause" @ended="onEnded" class="video"></video>
        <div class="body">
            <div class="body-title">
                <div class="title-left">
                    <img class="title-avatar" :src="videoInfo.avatar">
                    <span class="title-name">{{ videoInfo.name }}</span>
                </div>
                <div class="title-right">发布于&ensp;{{ videoInfo.createTime }}</div>
            </div>
            <div class="body-content">{{ videoInfo.content }}</div>
        </div>
        <template #footer>
            <div class="footer-top">
                <el-input class="commentInput" v-model="commentInput" @keyup.enter="sendComment()" placeholder="请输入评论..."></el-input>
                <el-button class="commentButton" @click="sendComment()">发表</el-button>
            </div>
            <div class="footer-body">
                <div class="center-botton" v-for="itemComment in commentList">
                    <div class="comment-header">
                      <img class="comment-avatar" :src="itemComment.commentAvatar">
                      <div class="comment-meta">
                        <span class="comment-name">{{ itemComment.commentName }}</span>
                        <br>
                        <small class="comment-time">{{ itemComment.createTime }}</small>
                      </div>
                    </div>
                    <div class="comment-body">{{ itemComment.comment }}</div>
                    <!-- <hr style="background-color: yellowgreen;"> -->
                  </div>
            </div>
        </template>
    </el-card>
</template>
<script setup lang="ts">
import {onMounted, ref} from 'vue'
import { useRoute,useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import useCounter from '../../stores/pinia';
  import { parseJwt } from '../../stores/pinia'
import { getVideoInfoAPI,getCommentListAPI,addCommentAPI } from '../../api/video';

const router=useRouter()
const counterStore=useCounter()
const {query}=useRoute()
const valVideoId=ref(query.videoId as any)
const valCommentListId=ref(query.commentListId as any)
const videoId=parseInt(valVideoId.value)
const commentInput=ref("")
const commentListId=parseInt(valCommentListId.value)

const userInfo=ref([])
const hoZhui=ref("?x-oss-process=video/snapshot,t_0,f_jpg")
const url=ref("https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4")
const videoInfo=ref({
    // id:1,
    // videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",
    // name:"钞人",
    // authorId:1,
    // createTime:"2022-12-1-1",
    // avatar:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4?x-oss-process=video/snapshot,t_0,f_jpg",
    // title:"顶顶顶顶顶",
    // content:"内容而个人个人个人隔热隔热隔热隔威风威风威风威风威风热隔热隔热日个日个日个热热个人个人个人内容内容"
})

const commentList=ref([
    // {id:22,commentName:"巍峨哇",commentAvatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",commentAuthorId:67,createTime:"2025-02-28 04:01:47",comment:"uiosfuih人他和肉体和serugf接口是你分五十"},
    // {id:22,commentName:"巍峨哇",commentAvatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",commentAuthorId:67,createTime:"2025-02-28 04:01:47",comment:"uiosfuihse 然后让他还有个突然rugf接口是你分五十"},
    // {id:23,commentName:"巍峨哇",commentAvatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",commentAuthorId:67,createTime:"2025-02-28 04:01:47",comment:"uiosfuihse儿童割让给rugf接口是你分五十"},
    // {id:25,commentName:"巍峨哇",commentAvatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",commentAuthorId:67,createTime:"2025-02-28 04:01:47",comment:"uiosfu热个体人格ihserugf接口是你分五十"},
    // {id:26,commentName:"巍峨哇",commentAvatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",commentAuthorId:67,createTime:"2025-02-28 04:01:47",comment:"uiosfuihse任天野环绕太阳和太热rugf接口是你分五十"},
    // {id:27,commentName:"巍峨哇",commentAvatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",commentAuthorId:67,createTime:"2025-02-28 04:01:47",comment:"uiosfu的恒天然恒天然ihserugf接口是你分五十"},
    // {id:28,commentName:"巍峨哇",commentAvatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",commentAuthorId:67,createTime:"2025-02-28 04:01:47",comment:"uiosfuihserugf接口是你分五十"},
    // {id:229,commentName:"巍峨哇",commentAvatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",commentAuthorId:67,createTime:"2025-02-28 04:01:47",comment:"uiosfui忽悠人它也会让他以后个 hserugf接口是你分五十"},
    // {id:22,commentName:"巍峨哇",commentAvatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",commentAuthorId:67,createTime:"2025-02-28 04:01:47",comment:"uiosfuihs他和肉体和erugf接口是你分五十"},
    // {id:22,commentName:"巍峨哇",commentAvatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",commentAuthorId:67,createTime:"2025-02-28 04:01:47",comment:"uiosfuihserugf接口是你分五十"},
    // {id:22,commentName:"巍峨哇",commentAvatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",commentAuthorId:67,createTime:"2025-02-28 04:01:47",comment:"uiosfuih传播广泛和serugf接口是你分五十"},
    // {id:22,commentName:"巍峨哇",commentAvatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",commentAuthorId:67,createTime:"2025-02-28 04:01:47",comment:"uiosfuihs绕太阳try犹太人犹太人风格和肉体和他人erugf接口是你分五十"},
    // {id:22,commentName:"巍峨哇",commentAvatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",commentAuthorId:67,createTime:"2025-02-28 04:01:47",comment:"uiosfuihse法国海军浑然一体记忆体空间和rugf接口是你分五十"},
    // {id:22,commentName:"巍峨哇",commentAvatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",commentAuthorId:67,createTime:"2025-02-28 04:01:47",comment:"uiosfuihserugf接口是你分五十"},
    // {id:22,commentName:"巍峨哇",commentAvatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",commentAuthorId:67,createTime:"2025-02-28 04:01:47",comment:"uiosfuihserugf接口是你分五十"},
  ])

const getVideoInfo=async()=>{
    let params={
        videoId:videoId,
        userId:userInfo.value.id
    }
    // console.log("上传的数据",params)
    const result=await getVideoInfoAPI(params)
    // console.log("返回的戏曲详情",result.data.data)
    videoInfo.value=result.data.data
}

const getCommentList=async()=>{
    let params={
        videoId:videoId,
        page:1,
        pageSize:20
    }
    const result=await getCommentListAPI(params)
    // console.log("返回的评论",result.data.data)
    commentList.value=result.data.data.list
}


const sendComment=async()=>{
    const jwt=counterStore.jwt
    if(jwt==null){
        ElMessage({
            message: '您还没登录，请先前往登录',
            type: 'warning',
        })
    }else{
        userInfo.value=parseJwt(jwt).claims
        let params={
            videoId:videoId,
            commentName:userInfo.value.username,
            commentAvatar:userInfo.value.avatar,
            commentAuthorId:userInfo.value.id,
            comment:commentInput.value
        }
        // console.log("发表的评论",params)
        const result=await addCommentAPI(params)
        if(result.data.code==0){
            commentInput.value=""
            getCommentList()
        }
    }

}

const goBack=()=>{
  router.push('/video')
}
onMounted(()=>{
    getVideoInfo()
    getCommentList()
})
</script>
<style scoped>
.goback{
  position: fixed;
  margin-left: 5%;
  margin-top: 50px;
  font-size:24px;
  color: #474a59;
  padding: 0 6px;
  font-weight: 500;
  border-color: #dbd2d2ac;
  border-bottom: 3px solid #dbd2d2ac;
  background-color: #dbd2d2ac;
}
.main{
    width: 70%;
    /* height: 90%; */
    background-color: #fff;
    /* display: flex; */
    margin: auto;
    margin-top: 50px;
    margin-bottom: 50px;
    /* padding-top: 50px; */
}
.title{
    font-size: 20px;
    font-weight: 500;
    /* font-style: italic; */
}
.video{
    width: 99.9%;
    max-height: 70vh;
    /* margin: ; */
}
.body{
    width: 100%;
    height: fit-content;
    margin-top: 20px;
    border-top: 1px solid #474a5923;
}
.body-title{
    width: 100%;
    height: 30px;
    margin-top: 5px;
    /* background-color: yellowgreen; */
    display: flex;
    flex-direction: row;
    align-items: center;
}
.title-left{
    width: fit-content;
    height: 100%;
    /* background-color: yellow; */
    display: flex;
    flex-direction: row;
    align-items: center;
}
.title-avatar{
    height: 25px;
    width: 25px;
    border-radius: 50%;
}
.title-name{
    margin-left: 8px;
    /* background-color: violet; */
}
.title-right{
    /* background-color: turquoise; */
    font-size: small;
    margin-left: auto;
}
.body-content{
    width: 100%;
    margin-top: 7px;
    margin-left: 8px;
    /* background-color: #474a59; */
}
.footer-top{
    display: flex;
    flex-direction: row;
}
.commentButton{
    background-color: #dbd2d2ac;
}
.commentButton:hover{
    color: #fff;
}
.center-botton{
    position: relative;
    margin-bottom: 10px;
    padding:0 5px;
    border-bottom: 1px solid #474a592c;
  }
  .comment-header{
    display: flex;
    align-items: center;
  }
  .comment-avatar{
    width: 25px;
    height: 25px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 10px;
  }
  .comment-meta{
    flex-grow: 1;
  }
  .comment-name{
    font-size: 12px;
    font-weight: bold;
    color: yellowgreen;
  }
  .comment-time{
    color:#aaa;
  }
  .comment-body{
    margin-left: 60px;
    /* line-height: 1.6; */
  }
</style>